{extend name="base" /}
{block name="body"}
<div class="layui-body">
    <!--tab标签-->
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li ><a href="{:url('admin/partake/appdata')}">APP数据</a></li>
  <!--            <li class=""><a href="{:url('admin/partake/banner')}">Banner图</a></li>
           <li class=""><a href="{:url('admin/partake/appdata')}">APP数据</a></li>
            <li class=""><a href="{:url('admin/partake/knowledge')}">知识聚焦数据统计</a></li>
           <li class=""><a href="{:url('admin/partake/forum')}">小讲数据统计</a></li>
           <li class=""><a href="{:url('admin/partake/live')}">直播间数据统计</a></li> -->
            <li class="layui-this">关键字数据统计</li>

        </ul>
        <div class="layui-tab-content">
            <form class="layui-form layui-form-pane" action="{:url('admin/search_index/search')}" method="GET">
                    <div class="layui-inline">
                        <label class="layui-form-label">关键词</label>
                        <div class="layui-input-inline">
                            <input type="text" name="keyword" value="{$keyword}" placeholder="请输入关键词" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-pane" style="margin-top: 15px;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">范围选择</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" placeholder="开始日" value="{$star_time}"  name="star_time" id="LAY_demorange_s">
                            </div>
                            <div class="layui-input-inline">
                                <input class="layui-input" placeholder="截止日" value="{$end_time}" name="end_time"  id="LAY_demorange_e">
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn">搜索</button>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <table class="layui-table" style="width: 30%;">
                                <colgroup>
                                    <col width="150">
                                    <col width="200">
                                    <col>
                                </colgroup>
                                <thead>
                                <tr>
                                    <th style="text-align: center;">名称</th>
                                    <th style="text-align: center;">数值</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td style="text-align: center;">总搜索量</td>
                                    <td style="text-align: center;">
                                    {$data.click_num}
                                    </td>

                                </tr>
                                <tr>
                                    <td style="text-align: center;">最高搜索关键字</td>
                                    <td style="text-align: center;">
                                        {$data.max_title}
                                    </td>

                                </tr>
                                
                                <tr>
                                    <td style="text-align: center;">最高搜索量</td>
                                    <td style="text-align: center;">
                                    {$data.max_num}
                                    </td>

                                </tr>
                               
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                </form>
            <hr>
            <form action="" method="post" class="ajax-form">
                <!-- <button type="button" class="layui-btn layui-btn-small ajax-action" data-action="{:url('admin/podcast/toggle',['type'=>'audit'])}">审核</button>
                <button type="button" class="layui-btn layui-btn-warm layui-btn-small ajax-action" data-action="{:url('admin/podcast/toggle',['type'=>'cancel_audit'])}">取消审核</button> -->
                <!-- <button type="button" class="layui-btn layui-btn-danger layui-btn-small ajax-action" data-action="{:url('admin/forum/delete')}">删除</button> -->
                <div class="layui-tab-item layui-show">
                    <table id="table_id_example" class="display">
                        <thead>
                        <tr>
                            <th style="width: 30px;">ID</th>
                            <th>关键字名称</th>
                            <th onclick="get_isnum()">搜索次数</th>
                            <!-- <th>操作</th> -->
                        </tr>
                        </thead>
                        <tbody>
                        {foreach name="list" item="vo"}
                        <tr>
                            <td>{$vo.id}</td>
                            <input type="hidden" name="id" value="{$vo.id}" >
                            <td>{$vo.keyword}</td>
                            <input type="hidden" name="keyword1" value="{$vo.keyword}" >
                            <td>{$vo.click_num}</td>
                            <input type="hidden" name="click_num" value="{$vo.click_num}" >

                        </tr>
                        {/foreach}
                        </tbody>
                    </table>
                    <!--分页-->
                    <hr>

                </div>
            </form>
        </div>
       <button class="layui-btn" onclick="sub()">饼图展示</button>
                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
              <div id="main" style="width: 1000px;height:400px;"></div>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
function get_isnum(){
        setTimeout('sub()', 500);
    };

    layui.use('laydate', function(){
        var laydate = layui.laydate;

        var start = {
            min: '1099-06-16 23:59:59'
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };

        var end = {
            min: '1099-06-16 23:59:59'
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };

        document.getElementById('LAY_demorange_s').onclick = function(){
            start.elem = this;
            laydate(start);
        }
        document.getElementById('LAY_demorange_e').onclick = function(){
            end.elem = this
            laydate(end);
        }

    });
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    function sub(){
        var keyword = new Array();
        // var click_num = new Array();
        var data = new Array();
        var n =document.getElementsByName('keyword1');
        var t =document.getElementsByName('click_num');

        for (var i = 0, j = n.length; i < j; i++){
            keyword.push(n[i].value);
        }

        // for (var i = 0, j = t.length; i < j; i++){
        //     click_num.push(t[i].value);
        // }

        for (var i = 0, j = t.length; i < j; i++){
            data.push({value: t[i].value, name: n[i].value});
        }
        console.log(data);
        var option = {
            title : {
                text: '关键字数据统计',
                subtext: '前10数据统计',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: keyword
            },
            series : [
                {
                    name: '搜索次数',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data: data,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
$(document).ready( function () {
    $('#table_id_example').DataTable();
} )
</script>
{/block}